<template>
  <div class="content-box relative-position"
       :id="'content-box-'+content.id"
       itemscop itemtype="http://schema.org/Map">
    <q-resize-observable @resize="onResize"/>
    <div class="shadow-light" @mouseenter="setHover(true)" @mouseleave="setHover(false)" :style="boxStyle">
      <div class="q-pt-md q-px-md q-pb-sm"
           style="background-color: rgba(255,255,255,1)">
        <div class="q-mb-xs row items-center">
          <div class="size-18 bold ellipsis col">
            <a class="title-link" target="_blank" :href="link">{{ content.title }}</a>
          </div>
          <div class="row">
            <div v-if="content.up_number" class="row items-center text-grey-6 size-14">
              <q-icon name="thumb_up" class="q-mr-xs"/>
              <div>{{ content.up_number }}</div>
            </div>
            <!--<div v-else-if="auth.id === content.add_user.id && type === 'article'">-->
            <!--<a-popover-menu :menu="menu" :instance="content"></a-popover-menu>-->
            <!--<a-set-topic v-if="setTopicModalId" v-model="setTopicModalId" model="article"></a-set-topic>-->
            <!--</div>-->
          </div>
        </div>
        <div class="text-grey-6 size-14 row justify-between">
          <div>{{ content.add_user.username }}</div>
          <div>{{ timesince(content.add_date) }}</div>
        </div>
      </div>
      <div :style="{visibility: hover || type !== 'map' ? 'visible' : 'hidden'}">
        <a class="size-16 content-summary q-my-md q-mx-md text-grey-9 invisible"
           target="_blank" :href="link">{{ content.summary||content.content||content.desc }}</a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'aContentBox',
    props: {
      content: {
        type: Object,
        required: true
      },
      type: {
        type: String,
        required: false,
        default: 'article'
      }
    },
    data() {
      return {
        setTopicModalId: null,
        hover: false,
        size: null,
        menu: [
          {
            name: '管理所在专题...',
            icon: 'delete',
            action: ({id}) => {
              this.setTopicModalId = id
            }
          }
        ]
      }
    },
    mounted() {
      this.$root.$on('contentBoxHover', (id) => {
        if (id !== this.content.id) {
          this.hover = false
        }
      })
    },
    computed: {
      link() {
        const type = this.type
        const id = this.content.id
        return `/${type}/${id}/`
      },
      boxStyle() {
        if (this.type === 'map' && !this.hover) {
          return {backgroundImage: 'url(/statics/thumbnail1.jpg)'}
        } else {
          return {backgroundColor: 'white'}
        }
      }
    },
    methods: {
      onResize(size) {
        this.size = size
        this.handleSummary(size)
      },
      handleSummary(size) {
        const id = this.content.id
        const lineHeight = 21
        // shave(`#content-box-${id} .content-summary`, size.height - 90)
        const el = document.querySelector(`#content-box-${id} .content-summary`)
        const containHeight = size.height - 120
        const content = this.content
        el.innerHTML = content.summary || content.content || content.desc
        console.log(containHeight, el.offsetHeight)
        if (containHeight - el.offsetHeight < 0) {
          const row = parseInt(containHeight / lineHeight)
          console.log(row)
          el.style['-webkit-line-clamp'] = row
          el.style.height = row * lineHeight + 'px'
        }
        el.classList.remove('invisible')
      },
      setHover(hover = false) {
        if (!this.$q.platform.is.desktop) {
          return
        }
        this.hover = hover

        if (hover) {
          this.$root.$emit('contentBoxHover', this.content.id)
          this.$nextTick(() => {
            this.handleSummary(this.size)
          })
        }
      }
    }
  }
</script>

<style lang="stylus">
  @import '~variables'
  .content-box
    a
      color #333 !important
    > div
      display inherit
      height 0
      padding-bottom: 56%
      position relative
      background-repeat no-repeat
      background-position center
      background-size cover

    .content-summary
      overflow hidden
      display -webkit-box
      -webkit-box-orient vertical
</style>
